<template>
  <div>
    <div>组件传值</div>
    <hf-trend type="up" text="营业额" />
    <hf-trend type="down" text="销售额" />
  </div>
  <div>
    <div>反转颜色</div>
    <hf-trend type="up" text="营业额" reverseColor />
    <hf-trend type="down" text="销售额" reverseColor />
  </div>
  <div>
    <div>定义图标颜色</div>
    <hf-trend type="up" text="营业额" upIconColor="blue" />
    <hf-trend type="down" text="销售额" downIconColor="gray" />
  </div>
  <div>
    <div>匿名插槽</div>
    <hf-trend type="up">
      营业额
    </hf-trend>
    <hf-trend type="down">
      销售额
    </hf-trend>
  </div>
  <div>
    <div>命名插槽</div>
    <hf-trend type="up">
      <template #text>营业额</template>
    </hf-trend>
    <hf-trend type="down">
      <template #text>销售额</template>
    </hf-trend>
  </div>
  <div>
    <div>文字颜色</div>
    <hf-trend type="up" text="营业额" upTextColor="red" />
    <hf-trend type="down" text="销售额" downTextColor="green" />
  </div>
  <div>
    <div>自定义图标</div>
    <hf-trend type="up" text="营业额" upIcon="CaretTop" />
    <hf-trend type="down" text="销售额" downIcon="CaretBottom" />
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
div {
  display: flex;
  margin-right: 8px;
  margin-bottom: 10px;
  div {
    color: aqua;
  }
}
</style>
